{% extends 'base/base_site.html' %} 

{% block content %}
<div class="ibox-title">
  <h5>统计报表</h5>
</div>
<div class="ibox-content">
   <div class="row">

    <div class="col-lg-4">
    <div  id="vmcluster_cpu" style="min-height:300px;"></div>
    </div>
    <div class="col-lg-4">
    <div  id="vmcluster_mem" style="min-height:300px;"></div>
    </div>
    <div class="col-lg-4">
    <div  id="vmcluster_disk" style="min-height:300px;"></div>
    </div>

    </div>
    <div class="row">

    <div class="col-lg-7">
    <div  id="vmcluster_servers" style="min-height:400px; margin-right:50px"></div>
    </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ block.super}}
<script src="/static/js/plugins/echart/echarts.min.js"></script>
<script src="/static/js/plugins/echart/macarons.js"></script>
<script src="/static/js/plugins/echart/dark.js"></script>
<script src="/static/js/plugins/echart/pie.js"></script>
<script src="/static/js/plugins/echart/line.js"></script>

<script>
// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('vmcluster_cpu'),'macarons');

        // 指定图表的配置项和数据
        var option = {
            title: {
//                link:"www.baidu.com",
                text: 'mem资源池',
                subtext:'单位:G',
                borderColor:'black',

            },
            tooltip: {show:true},
            legend: {
                data:['MEM']
            },
            xAxis: {
                data: ["97.201","97.202","97.203","97.204"]
            },
            yAxis: {},
            series: [{
                name: 'MEM',
                type: 'bar',
                data: [100, 190, 40, 110]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

</script>
<script>
// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('vmcluster_mem'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'CPU资源池',
                subtext:'单位:核',
            },
            tooltip: {show:true},
            legend: {
                data:['CPU']
            },
            xAxis: {
                data: ["97.201","97.202","97.203","97.204"]
            },
            yAxis: {},
            series: [{
                name: 'CPU',
                type: 'bar',
                data: [100, 190, 40, 110]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<script>
// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('vmcluster_disk'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'disk资源池',
                subtext:'单位:G',
            },
            tooltip: {show:true},
            legend: {
                data:['disk']
            },
            xAxis: {
                data: ["97.201","97.202","97.203","97.204"]
            },
            yAxis: {},
            series: [{
                name: 'disk',
                type: 'bar',
                data: [100, 190, 40, 110]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<script>
// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('vmcluster_servers'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '虚拟机分布',
                subtext:'单位:台',
            },
            tooltip: {},
            legend: {
                data:['servers']
            },
            xAxis: {
                data: ["97.201","97.202","97.203","97.204"]
            },
            yAxis: {},
            series: [{
                name: 'servers',
                type: 'bar',
                data: [10, 90, 40, 50]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>




{% endblock %}
